<!--
@wyq  radio切换组件
如
<radio-model v-model='' :dataList='datalist'></radio-model>

datalist: [
        {name: '', label: ''}，  // name 显示的名字  label：要传出的值
        {name: '', label: ''}，
        {name: '', label: ''}
    ]
-->


<template>
    <div class="model-radio">
        <van-radio-group v-model="myValue" style="display: flex;">
            <van-radio :name="item.label" v-for="(item, index) in dataList" :key="index" v-if="item.status">{{item.name}}</van-radio>
        </van-radio-group>
    </div>
</template>
<script>
    import {RadioGroup, Radio} from 'vant';
    export default {
        components: {
            [RadioGroup.name]:RadioGroup,
            [Radio.name]:Radio
        },
        props: {
            dataList: {
                type: Array,
                default: () => {
                    return [
                        {name: '调度模板', label: '0',status: true},
                        {name: '市场模板', label: '1',status: true},
                        {name: '标准模板', label: '2',status: true}
                    ]
                }
            },
            value: {
                type: String,
                default: ''
            },
        },
        watch: {
            myValue: function (newValue) {
                this.$emit('input', this.myValue);
            },
            value: function (newValue) {
                this.myValue = newValue;
            }
        },
        data() {
            return {
                // modelindex: '',
                myValue: ''
            }
        },
        created() {
            this.myValue = this.value;
        },
        methods: {
            // handleChange(value) {
            //     this.$emit('input', value);
            // }
        }
    }
</script>
<style lang="less">
    .model-radio{
        .van-radio-group{
            height: 0.28rem;
        }
        .van-radio{
            margin-right: 0.18rem;
        }
        .van-icon{
            top: 0.02rem;
        }
        .van-radio__label{
            margin-left:0.06rem ;
            /*margin-top: 0.06rem;*/
            color: #4A4A4A !important;
        }
    }
</style>
